import React, { memo, useState } from 'react'
import { useLocation, Outlet, NavLink } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Card } from 'antd'
// @ts-ignore
import Aicon from '@components/Icon.tsx'
import DivWrapper from './style'
import store from './store'
import { action1 } from './createAction'

const { SubMenu } = Menu
const { Header, Content, Sider } = Layout
const menu = [
  {
    cultivation: {
      name: '养殖系统',
      path: 'cultivation',
      menus: [
        {
          name: 'breeding-process',
          path: '/Cultivation/breeding-process/chickenhouse',
          meta: {
            icon: 'ProjectTwoTone',
            title: '养殖流程'
          },
          Comment: '',
          children: [
            {
              name: 'chickenhouse',
              path: '/Cultivation/breeding-process/chickenhouse',
              meta: {
                icon: 'BankTwoTone',
                title: '鸡舍信息管理'
              }
            },
            {
              name: 'inhenhouse',
              path: '/Cultivation/breeding-process/inhenhouse',
              meta: {
                icon: 'BankTwoTone',
                title: '肉鸡入舍管理'
              }
            },
            {
              name: 'cultivate-programs',
              path: '/Cultivation/breeding-process/cultivate-programs',
              meta: {
                icon: 'SnippetsTwoTone',
                title: '养殖计划'
              }
            },
            {
              name: 'buy-back',
              path: '/Cultivation/breeding-process/buy-back',
              meta: {
                icon: 'DollarCircleTwoTone',
                title: '肉鸡回购'
              }
            },
            {
              name: 'livestock',
              path: '/Cultivation/breeding-process/livestock',
              meta: {
                icon: 'MinusCircleTwoTone',
                title: '肉鸡出栏管理'
              }
            },
            {
              name: 'medicine',
              path: '/Cultivation/breeding-process/medicine',
              meta: {
                icon: 'ProjectTwoTone',
                title: '用药管理'
              },
              children: [
                {
                  name: 'record',
                  path: '/Cultivation/breeding-process/medicine/record',
                  meta: {
                    icon: 'ProjectTwoTone',
                    title: '用药记录'
                  }
                },
              ]
            },
            {
              name: 'illness',
              path: '/Cultivation/breeding-process/illness',
              meta: {
                icon: 'ProjectTwoTone',
                title: '疫病管理'
              },
              children: [
                {
                  name: 'day_illness',
                  path: '/Cultivation/breeding-process/illness/day_illness',
                  meta: {
                    icon: 'CalendarTwoTone',
                    title: '疫病日志'
                  }
                },
                {
                  name: 'disinfect',
                  path: '/Cultivation/breeding-process/illness/disinfect',
                  meta: {
                    icon: 'CalendarTwoTone',
                    title: '鸡舍消毒记录'
                  }
                },
                {
                  name: 'vaccines',
                  path: '/Cultivation/breeding-process/illness/vaccines',
                  meta: {
                    icon: 'CalendarTwoTone',
                    title: '肉鸡疫苗注射记录'
                  }
                }
              ]
            },
          ]
        },
        {
          name: 'fodder-manage',
          path: '/Cultivation/fodder-manage',
          meta: {
            icon: 'SnippetsTwoTone',
            title: '饲料管理'
          },

          children: [
            {
              name: 'fodder-instore',
              path: '/Cultivation/fodder-manage/fodder-instore',
              meta: {
                icon: 'BulbTwoTone',
                title: '饲料入库及记录'
              }
            },
            {
              name: 'fodder-outstore',
              path: '/Cultivation/fodder-manage/fodder-outstore',
              meta: {
                icon: 'BulbTwoTone',
                title: '饲料出库及记录'
              }
            }
          ]
        },
        {
          name: 'environmental-monitoring-and-early-warning',
          path: '/Cultivation/environmental-monitoring/environmental-monitoring-and-early-warning',
          meta: {
            icon: 'ExclamationCircleTwoTone',
            title: '环境监测及预警'
          },
          children: [
            {
              name: 'infrared-temperature-and-humidity-monitor-early-warning',
              path: '/Cultivation/environmental-monitoring/environmental-monitoring-and-early-warning/infrared-temperature-and-humidity-monitor-early-warning',
              meta: {
                icon: 'ExclamationCircleTwoTone',
                title: '温湿度监测'
              }
            },
          ]
        },
        {
          name: 'raising-basic-information',
          path: 'raising-basic-information',
          meta: {
            icon: 'ProjectTwoTone',
            title: '养殖基本信息'
          },
          children: [
            {
              name: 'culture-analysis',
              path: 'culture-analysis',
              meta: {
                icon: 'FundTwoTone',
                title: '养殖数据分析'
              },
              children: [
                {
                  name: 'environment-data',
                  path: '/Cultivation/raising-basic-information/culture-analysis/environment-data',
                  meta: {
                    icon: 'PieChartTwoTone',
                    title: '数据可视化'
                  }
                },
              ]
            }
          ]
        },
      ]
    }
  },
  {
    slaughter: {
      name: '屠宰系统',
      path: '/Slaughter',
      menus: [
        {
          name: 'FlowManage',
          path: '/Slaughter/FlowManage',
          meta: {
            icon: 'ProjectTwoTone',
            title: '屠宰流程管理'
          },
          component: '',
          children: [
            {
              name: 'ProductionPlan',
              path: '/Slaughter/FlowManage/ProductionPlan',
              meta: {
                icon: 'SnippetsTwoTone',
                title: '生产计划'
              },
              component: ''
            },
            {
              name: 'Receive',
              path: '/Slaughter/FlowManage/Receive',
              meta: {
                icon: 'BulbTwoTone',
                title: '屠宰领用'
              },
              component: ''
            },
            {
              name: 'ChickenWeighing',
              path: '/Slaughter/FlowManage/ChickenWeighing',
              meta: {
                icon: 'CarTwoTone',
                title: '毛鸡过磅'
              },
              component: ''
            },
            {
              name: 'Segmentation',
              path: '/Slaughter/FlowManage/Segmentation',
              meta: {
                icon: 'RestTwoTone',
                title: '分级分筐'
              },
              component: ''
            },
            {
              name: 'Splitrecords',
              path: '/Slaughter/FlowManage/Splitrecords',
              meta: {
                icon: 'CopyTwoTone',
                title: '分割记录'
              },
              component: ''
            },
            {
              name: 'Weigh',
              path: '/Slaughter/FlowManage/Weigh',
              meta: {
                icon: 'ProjectTwoTone',
                title: '屠宰称重'
              },
              component: ''
            },
            {
              name: 'Packing',
              path: '/Slaughter/FlowManage/Packing',
              meta: {
                icon: 'GiftTwoTone',
                title: '肉鸡包装'
              },
              component: ''
            }
          ]
        },
        {
          name: 'warehouse-manage',
          path: '/Slaughter/warehouse-manage',
          meta: {
            icon: 'ProjectTwoTone',
            title: '屠宰仓库管理'
          },

          component: '',
          children: [
            {
              name: 'input-warehouse-manage',
              path: '/Slaughter/warehouse-manage/input-warehouse-manage',
              meta: {
                icon: 'ProjectTwoTone',
                title: '入库管理'
              }
            },
            {
              name: 'out-warehouse-manage',
              path: '/Slaughter/warehouse-manage/out-warehouse-manage',
              meta: {
                icon: 'ProjectTwoTone',
                title: '出库管理'
              }
            },
            {
              name: 'accessory-warehouse',
              path: '/Slaughter/warehouse-manage/chicken-accessory-warehouse',
              meta: {
                icon: 'ProjectTwoTone',
                title: '辅料仓库'
              }
            },
            {
              name: 'chicken-quick-freeze',
              path: '/Slaughter/warehouse-manage/quick-freeze-warehouse',
              meta: {
                icon: 'ProjectTwoTone',
                title: '肉鸡速冻库'
              }
            },
            {
              name: 'chicken-cold-storage',
              path: '/Slaughter/warehouse-manage/cold-warehouse',
              meta: {
                icon: 'ProjectTwoTone',
                title: '肉鸡冷藏库'
              }
            }
          ]
        },
        {
          name: 'Records',
          path: '/Slaughter/Records',
          meta: {
            icon: 'EyeTwoTone',
            title: '记录查询'
          },
          component: '',
          children: [
            {
              name: 'OperatingRecord',
              path: '/Slaughter/Records/OperatingRecord',
              meta: {
                icon: 'CheckSquareTwoTone',
                title: '屠宰操作记录'
              },
              component: ''
            },
            {
              name: 'Receipt',
              path: '/Slaughter/Records/Receipt',
              meta: {
                icon: 'MoneyCollectTwoTone',
                title: '屠宰收费凭证'
              },
              component: ''
            }
          ]
        },
        {
          name: 'Paper',
          path: '/Slaughter/Paper',
          meta: {
            icon: 'ProjectTwoTone',
            title: '屠宰记录'
          },
          component: '',
          children: [
            {
              name: 'Dailypaper',
              path: '/Slaughter/Paper/Dailypaper',
              meta: {
                icon: 'CalendarTwoTone',
                title: '屠宰日报'
              },
              component: ''
            },
          ]
        }
      ]
    }
  },

  {
    warehouse: {
      name: '仓库系统',
      path: 'warehouse',
      menus: [

        {
          name: 'warehouse-information',
          path: '/warehouse/warehouse-information',
          meta: {
            icon: 'BankTwoTone',
            title: '仓库信息'
          },
          component: '',
          children: [
            {
              name: 'fodder-warehouse-information',
              path: '/warehouse/warehouse-information/fodder-warehouse-information',
              meta: {
                icon: 'TableOutlined',
                title: '饲料仓库信息'
              },
              component: ''
            },
            {
              name: 'slaughter-product-list',
              path: '/warehouse/warehouse-information/slaughter-product-list',
              meta: {
                icon: 'TableOutlined',
                title: '屠宰仓库产品列表'
              },
              component: ''
            },
            {
              name: 'slaughter-warehouse-information',
              path: '/warehouse/warehouse-information/slaughter-warehouse-information',
              meta: {
                icon: 'TableOutlined',
                title: '屠宰仓库信息'
              },
              component: ''
            }
          ]
        },
        {
          name: 'warehousing',
          path: '/warehouse/warehousing',
          meta: {
            icon: 'ShopTwoTone',
            title: '仓库存储情况'
          },
          component: '',
          children: [
            {
              name: 'fodder-warehousing',
              path: '/warehouse/warehousing/fodder-warehousing',
              meta: {
                icon: 'SnippetsTwoTone',
                title: '饲料仓库存储信息'
              },
              component: ''
            },
            {
              name: 'slaughter-of-warehousing',
              path: '/warehouse/warehousing/slaughter-of-warehousing',
              meta: {
                icon: 'SnippetsTwoTone',
                title: '屠宰仓库存储信息'
              },
              component: ''
            }
          ]
        }
      ]
    }
  },
  {
    wuliu: {
      name: '物流系统',
      path: 'wuliu',
      menus: [
        {
          name: 'logistics-management',
          path: '/wuliu/logistics-management',
          meta: {
            icon: 'WindowsOutlined',
            title: '物流管理'
          },
          children: [
            {
              name: 'Invoice',
              path: '/wuliu/logistics-management/invoice',
              meta: {
                icon: 'MessageTwoTone',
                title: '发货单'
              }
            }
          ]

        }, {
          name: 'Logistics-information',
          path: '/wuliu/Logistics-information/Start-vehicle',
          meta: {
            icon: 'WindowsOutlined',
            title: '物流信息'
          }, children: [
            {
              name: 'Start-vehicle',
              path: '/wuliu/Logistics-information/Start-vehicle',
              meta: {
                icon: 'MessageTwoTone',
                title: '发车车辆'
              },

            },

            {
              name: 'Vehicle-information',
              path: '/wuliu/Logistics-information/Vehicle-information',
              meta: {
                icon: 'MessageTwoTone',
                title: '车辆信息表'
              },
              component: ''
            },
            {
              name: 'Vehicle-Management',
              path: '/wuliu/Logistics-information/Vehicle-Management',
              meta: {
                icon: 'MessageTwoTone',
                title: '车辆管理处信息表'
              },
              component: ''
            },
            {
              name: 'applicationLogistics',
              path: '/wuliu/Logistics-information/applicationLogistics',
              meta: {
                icon: 'MessageTwoTone',
                title: '物流发车申请表'
              },
              component: ''
            },
            {
              name: 'stationLogistics',
              path: '/wuliu/Logistics-information/stationLogistics',
              meta: {
                icon: 'MessageTwoTone',
                title: '站点'
              },
              component: ''
            },
          ]
        }]
    }
  }
]
//在新建菜单的时候要注意，保持name和这个path是一致的，不然面包屑会缺失
// @ts-ignore
const a = menu[0].cultivation.menus
// @ts-ignore
const b = menu[1].slaughter.menus
// @ts-ignore
const c = menu[2].warehouse.menus
// @ts-ignore
const d = menu[3].wuliu.menus
const processMenus = { 养殖系统: a, 屠宰系统: b, 仓库系统: c, 物流系统: d }
// @ts-ignore
const renderMenu = (/** @type {any[]} */ menuList) => {
  return (
    //这里的<></>不要改成div,否则侧边栏失控
    <>
      {menuList?.map(
        (item) => {
          if (item.children) {
            return (
              <SubMenu
                key={item.path}
                icon={<Aicon type={item.meta?.icon} />}
                title={item.meta.title}
              >
                {renderMenu(item.children)}
              </SubMenu>
            )
          }
          return (
            <Menu.Item key={item.path} icon={<Aicon type={item.meta?.icon} />}>
              <NavLink to={item.path}>{item.meta.title}</NavLink>
            </Menu.Item>
          )
        }
      )}
    </>
  )
}
//获取当前路由
const getFirstPath = (path = '') => {
  const pathList = path.split('/')
  return `/${pathList[1]}/${pathList[2]}`
}

//中文面包屑
const getChineseTitles = (/** @type {any[]} */ paths) => {
  /**
   * @type {never[]}
   */
  let res = []
  /**
   * @type {any }
   */
  let first = []
  /**
   * @type {any[]}
   */
  let second = []

  /**
   * @type {any[]}
   */
  let third = []
  // @ts-ignore
  menu.forEach((i) => {
    if (paths[0].toLocaleLowerCase() in i) {
      // @ts-ignore
      first.push(i[paths[0].toLocaleLowerCase()].menus)
      // @ts-ignore
      res.push(i[paths[0].toLocaleLowerCase()].name)
    }
  })
  if (paths[1]) {
    // @ts-ignore
    first[0].forEach((i) => {
      if (paths[1].toLocaleLowerCase() === i.name.toLocaleLowerCase()) {
        // @ts-ignore
        res.push(i.meta.title)
        second.push(i.children)
      }
    })

    if (second[0]) {
      // @ts-ignore
      second[0].forEach((/** @type {{ name: string; }} */ i) => {
        if (paths[2].toLocaleLowerCase() === i.name.toLocaleLowerCase()) {
          // @ts-ignore
          res.push(i.meta.title)

          // @ts-ignore
          if (i.children) {
            // @ts-ignore
            third.push(i.children)
          }
        }
      })

      if (paths[3]) {
        third[0].forEach((/** @type {{ name: string; }} */ i) => {
          if (paths[3].toLocaleLowerCase() === i.name.toLocaleLowerCase()) {
            /*   console.log(i.name); */
            // @ts-ignore
            res.push(i.meta.title)
          }
        })
      }
    }
  }
  return res
}
export default memo(function Home() {
  const location = useLocation()
  const defaultOpenKeys = [getFirstPath(location.pathname)]
  const defaultSelectedKeys = [location.pathname]
  //  console.log('/Slaughter/StoreManage/OutStore'.split('/').splice(1),'moren');
  //  location.pathname==='/'?'Slaughter/StoreManage/OutStore':location.pathname
  const breadcrumbList = getChineseTitles(
    // @ts-ignore
    //如果location的路径为'/’则默认传出库管理的路径，否则传当前的location
    location.pathname !== '/'
      ? location.pathname.split('/').splice(1)
      : ['slaughter', 'FlowManage', 'segmentation']
  )

  //系统菜单
  const items1 = ['养殖系统', '屠宰系统', '仓库系统', '物流系统'].map((key) => ({
    key,
    label: `${key}`
  }))
  const [count, setcount] = useState('养殖系统')
  // @ts-ignore
  const handle = (item) => {
    store.dispatch(action1(item.key)) //发送但取不了值
    setcount(store.getState().name) //取到最近一次发送获得的值
  }
  // @ts-ignore
  const processMenu = processMenus[count]
  return (
    <DivWrapper>
      <Layout style={{ height: '100vh' }}>
        <Header className="header">
          <NavLink
            className="logo"
            to="/Navigation" children={null} />
          <span>智慧肉鸡服务云平台</span>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['养殖系统']}
            items={items1}
            style={{ marginLeft: 30 }}
            onSelect={(/** @type {any} */ data) => handle(data)}
          />
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            {/* 这里使用了flex滚动条 ，只处理overflow的时候*/}
            <div
              style={{
                display: 'flex',
                height: '100%',
                flexDirection: 'column'
              }}
            >
              <div style={{ flex: 1, overflow: 'auto' }}>
                <Menu
                  mode="inline"
                  defaultSelectedKeys={defaultSelectedKeys}
                  defaultOpenKeys={defaultOpenKeys}
                  /* 这里的高度设置了最小高度，可以一直展开，当展开了就触发了overflow*/
                  style={{ borderRight: 0, minHeight: '100%' }}
                >
                  {renderMenu(processMenu)}
                </Menu>
              </div>
            </div>
          </Sider>
          <Layout style={{ padding: '0 0 0 20px' }}>
            <Breadcrumb style={{ margin: '10px 0' }}>
              {breadcrumbList.map((item) => (
                <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
              ))}
            </Breadcrumb>
            <Content
              className="site-layout-background"
              style={{
                minHeight: '70vh',
                overflowY: 'scroll'
              }}
            >
              <Card style={{ margin: ' 0 10px 25px 0' }}>
                <Outlet />
              </Card>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </DivWrapper>
  )
})
